<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard" body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>
            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容" v-model="queryInfo.srm" clearable @clear="clearEvent"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium" type="primary" @click="getSearchList()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="TableCard" :body-style="{ padding: '0px' }">
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'text-align':'center',background: '#3F9DFD', color: '#FFF' }"
          :cell-style="{'text-align':'center'}"
          size="medium"
          stripe
          ref="table"
          :height="tableHeight"
          style="width: 100%;font-size:12px"
        >
          <el-table-column type="index" label="序列号" width="60" fixed></el-table-column>
          <el-table-column prop="drugCode" label="药品编码" width="80" fixed></el-table-column>
          <el-table-column prop="drugName" label="药品名称" width="120" fixed>
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="goExplainpage(scope.row.drugCode)"
              >{{scope.row.drugName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="药品类型" width="80" fixed>
            <template slot-scope="scope">
              <div v-if="scope.row.nameType==8">西药</div>
              <div v-else-if="scope.row.nameType==2">草药</div>
              <div v-else-if="scope.row.nameType==6">中成药</div>
            </template>
          </el-table-column>
          <el-table-column prop="drugSpec" label="药品规格" width="1350">
            <template slot-scope="scope">
              <!-- "dosageDrugId": "剂量id",
                    "contrScrDrugId": "药物禁忌症Id",
                    "interDrugId": "相互作用id",
                    "ivDrugId": "体外配伍id",
                    "dupIngGenDrugId": "重复用药id",
                    "indicaDrugId": "超适应症id",
                    "pediatricDrugId": "儿童用药id",
                    "adultDrugId": "成人用药id",
                    "geriatricDrugId": "老人用药id",
                    "pregnancyDrugId": "妊娠用药id",
                    "sexDrugId": "性别用药id",
                    "routeDrugId": "给药途径id",
                    "piDrugId": "说明书Id",
                    "lactDrugId": "哺乳用药3",
                    "hepdosageId": "肝损害",
              "rendosageDrugId": "肾损害"-->
              <el-button
                size="small"
                plain
                @click="ShowJLDialog('剂量',scope.row.dosageDrugId,scope.row.drugCode)"
                :type="(scope.row.dosageDrugId>0)?'danger':''"
              >剂量</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.contrScrDrugId>0)?'danger':''"
                @click="ShowYWJJDialog('药物禁忌症',scope.row.contrScrDrugId,scope.row.drugCode)"
              >药物禁忌症</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.interDrugId>0)?'danger':''"
                @click="ShowXHZYDialog('相互作用',scope.row.interDrugId,scope.row.drugCode)"
              >相互作用</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.ivDrugId>0)?'danger':''"
                @click="ShowTWPWDialog('体外配伍',scope.row.ivDrugId,scope.row.drugCode)"
              >体外配伍</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.dupIngGenDrugId>0)?'danger':''"
                @click="ShowCFYYDialog('重复用药',scope.row.dupIngGenDrugId,scope.row.drugCode)"
              >重复用药</el-button>
              <el-button size="small" plain :type="(scope.row.indicaDrugId>0)?'danger':''">超适应症</el-button>
              <el-button
                size="small"
                plain
                @click="ShowETDialog('儿童',scope.row.pediatricDrugId,scope.row.drugCode)"
                :type="(scope.row.pediatricDrugId>0)?'danger':''"
              >儿童用药</el-button>
              <el-button
                size="small"
                plain
                @click="ShowCRDialog('成人',scope.row.adultDrugId,scope.row.drugCode)"
                :type="(scope.row.adultDrugId>0)?'danger':''"
              >成人用药</el-button>
              <el-button
                size="small"
                plain
                @click="ShowLRDialog('老人',scope.row.geriatricDrugId,scope.row.drugCode)"
                :type="(scope.row.geriatricDrugId>0)?'danger':''"
              >老人用药</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.pregnancyDrugId>0)?'danger':''"
                @click="ShowRSDialog('妊娠用药',scope.row.pregnancyDrugId,scope.row.drugCode)"
              >妊娠用药</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.sexDrugId>0)?'danger':''"
                @click="ShowXBDialog('性别用药',scope.row.sexDrugId,scope.row.drugCode)"
              >性别用药</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.routeDrugId>0)?'danger':''"
                @click="ShowGYTJDialog('给药途径',scope.row.routeDrugId,scope.row.drugCode)"
              >给药途径</el-button>

              <el-button
                size="small"
                plain
                :type="(scope.row.lactDrugId>0)?'danger':''"
                @click="ShowBRYYDialog('哺乳用药',scope.row.lactDrugId,scope.row.drugCode)"
              >哺乳用药</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.hepdosageId>0)?'danger':''"
                @click="ShowGSHDialog('肝损害',scope.row.hepdosageId,scope.row.drugCode)"
              >肝损害</el-button>
              <el-button
                size="small"
                plain
                :type="(scope.row.rendosageDrugId>0)?'danger':''"
                @click="ShowSSHDialog('肾损害',scope.row.rendosageDrugId,scope.row.drugCode)"
              >肾损害</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          background
        ></el-pagination>
      </div>
    </el-card>

    <!-- JL -->
    <JLDialog
      :show.sync="JLDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="jlref"
    ></JLDialog>
    <!-- 药物禁忌 -->
    <YWJJDialog
      :show.sync="YWJJDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="ywjjref"
    ></YWJJDialog>
    <!-- 相互作用 -->
    <XHZYDialog
      :show.sync="XHZYDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="xhzyref"
    ></XHZYDialog>
    <!-- 体外配伍 -->
    <TWPWDialog
      :show.sync="TWPWDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="twpwref"
    ></TWPWDialog>
    <!--重复用药 -->
    <CFYYDialog
      :show.sync="CFYYDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="cfyyref"
    ></CFYYDialog>
    <!-- 成人 -->
    <CRDialog
      :show.sync="CRDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="crref"
    ></CRDialog>
    <!-- 妊娠 -->
    <RSDialog
      :show.sync="RSDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="rsref"
    ></RSDialog>
    <!-- 性别 -->
    <XBDialog
      :show.sync="XBDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="xbref"
    ></XBDialog>
    <!-- 老人 -->
    <LRDialog
      :show.sync="LRDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="lrref"
    ></LRDialog>
    <!-- 儿童 -->
    <ETDialog
      :show.sync="ETDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="etref"
    ></ETDialog>
    <!-- 给药途径 -->
    <GYTJDialog
      :show.sync="GYTJDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="gytjref"
    ></GYTJDialog>
    <!-- 哺乳用药 -->
    <BRYYDialog
      :show.sync="BRYYDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="bryyref"
    ></BRYYDialog>
    <!-- 肝损害 -->
    <GSHDialog
      :show.sync="GSHDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="gshref"
    ></GSHDialog>
    <!-- 肝损害 -->
    <SSHDialog
      :show.sync="SSHDialogVisible"
      :drugid="DrugId"
      :drugCode="drugCode"
      :title="DialogTitle"
      ref="sshref"
    ></SSHDialog>
  </div>
</template>
<script>
import { getConfirmRuleList } from "@/api/rad";
import JLDialog from "./JLDialog";
import YWJJDialog from "./YWJJDialog";
import XHZYDialog from "./XHZYDialog";
import TWPWDialog from "./TWPWDialog";
import CFYYDialog from "./CFYYDialog";
import CRDialog from "./CRDialog";
import RSDialog from "./RSDialog";
import XBDialog from "./XBDialog";
import LRDialog from "./LRDialog";
import ETDialog from "./ETDialog";
import GYTJDialog from "./GYTJDialog";
import BRYYDialog from "./BRYYDialog";
import GSHDialog from "./GSHDialog";
import SSHDialog from "./SSHDialog";
export default {
  components: {
    JLDialog,
    YWJJDialog,
    XHZYDialog,
    TWPWDialog,
    CFYYDialog,
    CRDialog,
    RSDialog,
    XBDialog,
    LRDialog,
    ETDialog,
    GYTJDialog,
    BRYYDialog,
    GSHDialog,
    SSHDialog,
  },
  data() {
    return {
      tableHeight: 250,
      queryInfo: {
        srm: "",
        page: 1,
        pageSize: 20,
      },
      total: 0,
      tableData: [],
      DialogTitle: "",
      DrugId: "",
      drugCode: "",
      JLDialogVisible: false,
      YWJJDialogVisible: false,
      XHZYDialogVisible: false,
      TWPWDialogVisible: false,
      CFYYDialogVisible: false,
      CRDialogVisible: false,
      LRDialogVisible: false,
      RSDialogVisible: false,
      XBDialogVisible: false,
      ETDialogVisible: false,
      GYTJDialogVisible: false,
      BRYYDialogVisible: false,
      GSHDialogVisible: false,
      SSHDialogVisible: false,
    };
  },
  // 监听浏览器变化
  mounted: function () {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 50;
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 50;
      };
    });
  },
  created: function () {
    this.getConfirmRuleList();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getConfirmRuleList();
    },

    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getConfirmRuleList();
    },
    async getConfirmRuleList() {
      let res = await this.$rad.getConfirmRuleList({
        srm: this.queryInfo.srm,
        page: this.queryInfo.page,
        pageSize: this.queryInfo.pageSize,
      });
      this.tableData = res.rows;
      this.total = res.total;
      console.log(res.rows);
    },
    getSearchList() {
      this.queryInfo.page = 1;
      this.getConfirmRuleList();
    },
    clearEvent() {},
    // 剂量
    ShowJLDialog(title, dosageDrugId, drugCode) {
      this.DrugId = dosageDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      this.JLDialogVisible = true;
      this.$refs.jlref.getList(dosageDrugId);
    },
    // 药物禁忌
    ShowYWJJDialog(title, contrScrDrugId, drugCode) {
      this.DrugId = contrScrDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      this.YWJJDialogVisible = true;
      this.$refs.ywjjref.getList(contrScrDrugId);
    },
    // 相互作用
    ShowXHZYDialog(title, interDrugId, drugCode) {
      this.DrugId = interDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      this.XHZYDialogVisible = true;
      this.$refs.xhzyref.getList(interDrugId);
    },
    // 体外配伍
    ShowTWPWDialog(title, ivDrugId, drugCode) {
      this.DrugId = ivDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      this.TWPWDialogVisible = true;
      this.$refs.twpwref.getList(ivDrugId);
    },
    // 重复用药
    ShowCFYYDialog(title, dupIngGenDrugId, drugCode) {
      this.DrugId = dupIngGenDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      this.CFYYDialogVisible = true;
      this.$refs.cfyyref.getList(dupIngGenDrugId);
    },
    // 成人
    ShowCRDialog(title, adultDrugId, drugCode) {
      this.DrugId = adultDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.CRDialogVisible = true;
      this.$refs.crref.getList(adultDrugId);
    },
    // 老人
    ShowLRDialog(title, geriatricDrugId, drugCode) {
      this.DrugId = geriatricDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.LRDialogVisible = true;
      this.$refs.lrref.getList(geriatricDrugId);
    },
    // 妊娠
    ShowRSDialog(title, pregnancyDrugId, drugCode) {
      this.DrugId = pregnancyDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.RSDialogVisible = true;
      this.$refs.rsref.getList(pregnancyDrugId);
    },
    // 性别
    ShowXBDialog(title, sexDrugId, drugCode) {
      this.DrugId = sexDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.XBDialogVisible = true;
      this.$refs.xbref.getList(sexDrugId);
    },
    // 儿童
    ShowETDialog(title, pediatricDrugId, drugCode) {
      this.DrugId = pediatricDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.ETDialogVisible = true;
      this.$refs.etref.getList(pediatricDrugId);
    },
    // 给药途径
    ShowGYTJDialog(title, routeDrugId, drugCode) {
      this.DrugId = routeDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.GYTJDialogVisible = true;
      this.$refs.gytjref.getList(routeDrugId);
    },
    // 哺乳用药
    ShowBRYYDialog(title, lactDrugId, drugCode) {
      this.DrugId = lactDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.BRYYDialogVisible = true;
      this.$refs.bryyref.getList(lactDrugId);
    },
    // 肝损害
    ShowGSHDialog(title, hepdosageId, drugCode) {
      this.DrugId = hepdosageId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.GSHDialogVisible = true;
      this.$refs.gshref.getList(hepdosageId);
    },
    // 肾损害
    ShowSSHDialog(title, rendosageDrugId, drugCode) {
      this.DrugId = rendosageDrugId;
      this.drugCode = drugCode;
      this.DialogTitle = title;
      // console.log(this.DrugId);
      this.SSHDialogVisible = true;
      this.$refs.sshref.getList(rendosageDrugId);
    },
    goExplainpage(drugCode) {
      console.log(1);
      let routeData = this.$router.resolve({
        path: "/explainpage", //跳转路径
        name: "Explainpage",
        // 参数
        query: {
          drugCode: drugCode,
        },
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>